<template>
  <a href="test" class="test">测试窗口</a>
  <a href="/" class="test" style="position: absolute;left:100px">登录窗口</a>
  <a href="/admin" class="test" style="position: absolute;left:180px">管理员登录</a>
  <el-container>
    <el-main>
      <!--      对话框主界面-->
      <div class="main">
        <!--        对话框右侧部分-->
        <div class="main_left">
          <div>
            <h1>Welcome</h1>
            <h2>学生成绩管理系统</h2>
          </div>
        </div>
        <!--        对话框左侧部分-->
        <div class="main_right">
          <!--        登录组件部分-->
          <div>
            <router-view/>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Login"
}
</script>

<style scoped>
.test {
  text-decoration: none;
  color: #fff;
  position: absolute;
  left: 10px;
  top: 10px;
}

.main {
  /*圆角*/
  border-radius: 10px;
  /*背景毛玻璃*/
  background-color: rgba(255, 255, 255, .4);
  width: 1000px;
  height: 550px;
  margin: 200px auto;
}

.main_left {
  float: left;
  /*背景毛玻璃*/
  background-color: rgba(255, 255, 255, .2);
  border-radius: 10px 0px 0px 10px;
  width: 50%;
  height: 100%;
}

/*左侧主标题*/
.main_left div {
  margin: 40% 10%;
}

.main_right {
  float: right;
  /*到底是加毛玻璃还是不加好看呢？*/
  background-color: #fff;
  /* background-color: rgba(255, 255, 255, .4);*/
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
}

/*右侧登录组件部分*/
.main_right div {
  padding: 40px;
}
</style>